<!--注册-->
<template>
    <div>
        <div class="fullscreen-bg"
             style='background-image: url("../../assets/login-images/bac.jpg");'>
            <img src="https://images.mafengwo.net/images/signup/wallpaper/11.jpg" style="width: 100%; height: auto; margin-top: 0px;"/>
        </div>

        <!--注册-->
        <div class="wrapper">
            <div class="container">
                <a href="#" title="返回首页" class="logo">蜂寻</a>
                <div class="signup-forms">
                    <div class="signup-box">
                        <div class="add-info">
                            <div class="hd">账号注册</div>
                            <form class="_j_regist_form" style="position:relative; padding-top: 15px;">
<!--                                <input type="hidden" name="mobile" value="" id="_js_regist_phone" />-->
<!--                                <input type="hidden" name="challenge" id="_js_regist_challenge" />-->
                                <div class="form-field m-t-10">
                                    <input name="name" type="text" placeholder="您的名号" autocomplete="off" data-verification-name="名号"/>
                                    <div class="err-tip" id="_j_err_tip_1"></div>
                                </div>

                                <div class="form-field">
                                    <!--<el-input placeholder="请输入密码" v-model="input" autocomplete="off" show-password></el-input>-->
                                    <input name="password" type="password" placeholder="您的密码" autocomplete="off" data-verification-name="密码"/>

                                    <div class="err-tip" style="display: none; margin-left: 10px">
                                        密码不能小于8个字符
                                    </div>

                                    <div class="err-tip" style="display: none; margin-left: 10px">
                                        密码不能为空
                                    </div>

                                    <div class="err-tip" style="display: none; margin-left: 10px">
                                        两次输入的密码不相等
                                    </div>

                                    <div class="err-tip" style="display: none; margin-left: 10px">
                                        密码过于简单，需包含字母和数字
                                    </div>
                                </div>

                                <div class="form-field">
                                    <input name="rpassword" type="password" placeholder="确认密码" class="verification[equals[password]]" id="_j_regist_rpassword" />
                                    <div class="err-tip"></div>
                                </div>

                                <div class="form-field">
                                    <div class="clearfix">
                                        <!--vcode-send-->
                                        <input class="close_tel" id="addSendCode"
                                                type="button" @click.prevent="getCode" value="免费获取验证码   "/>
<!--                                        <input type="button" class="close_tel" id="addSendCode" value="获取验证码" @click.prevent="getCode"/>-->

                                        <input name="smscode" type="text" placeholder="短信验证码"
                                               autocomplete="off" data-verification-name="短信验证码"
                                               class="vcode-input" id="_js_regist_code"/>
                                    </div>

                                    <div class="err-tip clearfix" id="_j_err_tip_2"></div>
                                </div>

                                <div class="submit-btn">
                                    <button type="button" id="submit_button" @click.prevent="register">
                                        完成注册
                                    </button>
                                </div>
                            </form>

                            <!--<form action="/regist/mobile" method="post" id="_j_regist_form_hide" style="visibility: hidden;">
                                <input id="_j_regist_challenge" type="text" name="challenge" value/>
                                <input id="_j_regist_name" type="text" name="challenge" value/>
                                <input id="_j_regist_password" type="text" name="password" value/>
                                <input id="_j_regist_mobile" type="text" name="mobile" value/>
                                <input id="_j_regist_smscode" type="text" name="smscode" value/>
                            </form>-->
                            <div style="height: 50px"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "register",
        data(){
            return{
                input: '',
                AddIntegerValObj:0,  //timer变量,控制时间
                adcount:60,  //间隔函数，1秒执行
                addCount:0  //当前剩余秒数
            };
        },
        methods:{
            register(){
                var inpu = document.getElementsByTagName("input");
                var password = inpu[1].value;
                var confirm = inpu[2].value;
                var error = document.getElementsByClassName("err-tip");
                var re_n = /[^\d]/g;
                /*判断密码是否为空*/
                if (password == ""){
                    error[2].style.display = "block";
                } else if (password != ""){
                    error[2].style.display = "none";
                }
                /*判断密码是否8个字符*/
                if (password == null || password == "" || password.length < 8) {
                    error[1].style.display = "block";
                } else {
                    error[1].style.display = "none";
                    /*判断是否相等*/
                    if (password != confirm){
                        error[3].style.display = "block";
                        error[4].style.display = "none";
                    }else if (password == confirm){
                        error[3].style.display = "none";
                        /*判断密码是否包含字母*/
                        if (!re_n.test(password)){
                            error[4].style.display = "block";
                        }else if (password == confirm){
                            error[4].style.display = "none";
                        }
                    }
                }
            },
            getCode(){
                //alert("验证码");
                this.addCount = this.adcount;  //设置button效果，开始计时奥里给
                // eslint-disable-next-line no-undef
                $("#addSendCode").attr("disabled", "true");
                // eslint-disable-next-line no-undef
                $("#addSendCode").val("" + this.addCount + "秒后重新获取     ").css({
                    "background-color":"#D1D4D3"
                });
                //启动计时器,1秒执行一次
                this.AddIntegerValObj = window.setInterval(this.setAddTime,1000);
                    //alert("开始了")
                },
            setAddTime:function () {
                if(this.addCount == 0){
                    //停止计时器
                    window.clearInterval(this.AddIntegerValObj);
                    //启动按钮
                    // eslint-disable-next-line no-undef
                    $("#addSendCode").removeAttr("disabled");
                    // eslint-disable-next-line no-undef
                    $("#addSendCode").val("重新获取验证码").css({
                        "backgroun-color":"#0097a8"
                    })
                }else{
                    this.addCount--;
                    // eslint-disable-next-line no-undef
                    $("#addSendCode").val("" + this.addCount + "秒后重新获取     ").css({
                        "background-color":"#D1D4D3"
                    })
                }
            }
        }
    }
</script>

<style scoped>
    /*注册背景图*/
    .fullscreen-bg::after {
        bottom: 0;
        content: "";
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
    }
    .fullscreen-bg:before {
        background: url(../../assets/login-images/full_page_vignette.png) 0 0
        rgba(0, 0, 0, 0.2);
        background-size: 100%;
        bottom: 0;
        content: "";
        left: 0;
        opacity: 0.5;
        position: fixed;
        right: 0;
        top: 0;
    }
    .fullscreen-bg {
        background-position: 100% 100%;
        background-size: cover;
        bottom: 0;
        right: 0;
        position: fixed;
        overflow: hidden;
        left: 0;
        top: 0;
    }

    /*注册盒子*/
    .clearfix:after,
    .wrapper:after,
    .article:after {
        content: '\20';
        clear: both;
        display: block
    }

    .clearfix,
    .wrapper,
    .article {
        *zoom: 1
    }

    .wrapper {
        width: 980px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -245px 0 0 -490px;
        z-index: 2;
        color: #666
    }

    .container {
        width: 370px;
        margin: -30px auto 0
    }

    .container a.logo {
        width: 75px;
        height: 90px;
        display: block;
        text-indent: -999px;
        overflow: hidden;
        /*background: url(/images/signup/logo-new.png) no-repeat;*/
        margin: 0 auto
    }

    @media only screen and (-webkit-min-device-pixel-ratio:2),
    only screen and (min-device-pixel-ratio:2) {
        .container a.logo {
            background-position: -50px 0;
            background-size: 150px 100px
        }
    }

/*----------------------------------------------------------*/
    .signup-forms {
        position: relative
    }

    .signup-forms .inner {
        width: 370px;
        padding-top: 26px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 3px 3px rgba(0, 0, 0, .4)
    }

    .signup-forms .form-field {
        clear: both;
        width: 320px;
        margin: 0 auto;
        padding-top: 10px;
        zoom: 1\9
    }

    /*设置input框*/
    .signup-forms .form-field input {
        width: 306px;
        height: 28px;
        border: 1px solid #d8d8d8;
        border-radius: 4px;
        font-size: 14px;
        color: #666;
        line-height: 28px;
        padding: 6px 0 6px 12px;
        box-shadow: 0 0 5px #fff;
        outline: 0;
        transition: box-shadow .25s linear 0s;
        -webkit-transition: box-shadow .25s linear 0s;
        margin: 5px 0px;
    }

    .signup-forms .form-field input:focus {
        border: 1px solid #ffa200;
        box-shadow: 0 0 5px #ffa200;
        outline: 0;
        transition: box-shadow .25s linear 0s;
        -webkit-transition: box-shadow .25s linear 0s
    }

    .signup-forms .form-field input {
        border-color: #f6f7f9;
        background: #f6f7f9;
        border-radius: 6px;
        font-family: PingFangSC-Medium, PingFang SC;
    }

    .signup-forms .form-field .disable-input {
        width: 308px;
        height: 28px;
        line-height: 28px;
        border: 1px solid #d8d8d8;
        border-radius: 4px;
        font-size: 14px;
        color: #666;
        padding: 6px 0 6px 12px;
        box-shadow: 0 0 5px #fff
    }

    .signup-forms .form-field .email {
        color: #999;
        text-align: left;
        line-height: 2em
    }

    .signup-forms .form-link {
        clear: both;
        width: 320px;
        margin: 0 auto;
        padding: 8px 0 0;
        text-align: right
    }

    .signup-forms .form-link a {
        color: #ffa800
    }

    .signup-forms .err-input {
        border: 1px solid #ff3c00
    }

    #_j_forget_form {
        padding-top: 25px;
        position: relative
    }

    #_j_signup_mobile_form,
    #_j_complete_form {
        padding-top: 15px;
        position: relative
    }

    .signup-forms .err-tip {
        clear: both;
        /*background: url(/images/signup/err_ico2.png) 0 -60px no-repeat #fff;*/
        padding: 0 0 3px 22px;
        width: 300px;
        font-size: 12px;
        color: #ff3c00;
        margin-top: 10px;
        top: 0;
        position: absolute;
        text-align: left;
        display: none
    }

    .signup-forms .err-tip a {
        color: #ff8a00;
        text-decoration: none
    }

    .signup-forms .err-tip a:hover {
        text-decoration: underline
    }

    .signup-forms .info-tip {
        background-color: #fffee1;
        color: #daac50;
        border: 1px solid #f5c056;
        font-size: 12px;
        line-height: 18px;
        margin-top: 12px;
        position: relative;
        padding: 8px 12px;
        border-radius: 4px
    }

    .signup-forms .info-tip h5 {
        color: #c09853
    }

    .signup-forms .form-field input.vcode-input {
        width: 174px;
        float: right;
        margin-right: 7px;
    }

    .signup-forms .vcode-view {
        border: 1px solid #dfdfdf;
        border-radius: 2px;
        box-shadow: 0 0 5px #fff;
        display: inline-block;
        margin: 0 0 0 10px;
        vertical-align: top
    }

    .signup-forms .vcode-view img {
        height: 36px
    }

    .signup-forms .vcode-send {
        width: 120px;
        height: 40px;
        line-height: 40px;
        display: inline-block;
        /*margin-right: 10px;*/
        margin-left: 8px;
        text-align: center;
        border: 1px solid #dfdfdf;
        border-radius: 4px;
        background: #f2f2f2;
        background: -moz-linear-gradient(top, #fff, #f2f2f2);
        background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#f2f2f2));
        color: #333;
        vertical-align: top;
        float: left;
        overflow: hidden;
        outline: none;
    }

    .signup-forms .vcode-send:hover {
        background: #fff;
        text-decoration: none
    }

    .signup-forms .vcode-send.disabled {
        background: #f2f2f2;
        cursor: default;
        color: #b3b3b3
    }

    .signup-forms .submit-btn {
        width: 320px;
        margin: 0 auto;
        padding: 12px 0 0
    }

    .signup-forms .submit-btn button {
        width: 320px;
        height: 42px;
        border: 0;
        background-color: #ffa800;
        border-radius: 5px;
        text-align: center;
        line-height: 40px;
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        cursor: pointer;
        outline: none;
    }

    .signup-forms .submit-btn button:hover {
        background-color: #ffb01e
    }

    .signup-forms .submit-btn button.disabled {
        background-color: #999;
        color: #fff;
        cursor: pointer
    }

    .signup-forms .submit-btn a {
        color: #ff8a00
    }

    .signup-forms .agreement {
        width: 320px;
        margin: 0 auto;
        padding-top: 12px;
        font-size: 12px;
        color: #ccc;
        text-align: right;
        line-height: 1em
    }

    .signup-forms .agreement a {
        color: #999;
        font-size: 12px;
        margin-left: 2px
    }

    .signup-forms .agreement a:hover {
        color: #3f200f
    }

    .signup-forms .connect {
        clear: both;
        overflow: hidden;
        margin-top: 30px
    }

    .signup-forms .connect .hd {
        padding: 15px 0 20px 24px;
        font-size: 12px;
        color: #999;
        border-top: 1px solid #ebebeb
    }

    .signup-forms .connect .bd {
        padding: 0 0 0 25px;
        width: 348px;
        height: 84px;
        overflow: hidden
    }

    .signup-forms .connect .bd.open {
        height: auto
    }

    .signup-forms .connect a {
        width: 58px;
        height: 84px;
        text-align: center;
        font-size: 12px;
        color: #999;
        display: inline-block;
        margin-right: 25px
    }

    .signup-forms .connect a:hover {
        color: #666;
        text-decoration: none
    }

    .signup-forms .connect a i {
        width: 42px;
        height: 42px;
        /*background: url(/images/signup/c_icon3.gif) no-repeat;*/
        display: block;
        margin: 0 0 4px 10px;
        cursor: pointer
    }

    .signup-forms .connect a.weibo i {
        background-position: 0 0
    }

    .signup-forms .connect a.weibo:hover i {
        background-position: 0 -42px
    }

    .signup-forms .connect a.qq i {
        background-position: -42px 0
    }

    .signup-forms .connect a.qq:hover i {
        background-position: -42px -42px
    }

    .signup-forms .connect a.renren i {
        background-position: -84px 0
    }

    .signup-forms .connect a.renren:hover i {
        background-position: -84px -42px
    }

    .signup-forms .connect a.msn i {
        background-position: -126px 0
    }

    .signup-forms .connect a.msn:hover i {
        background-position: -126px -42px
    }

    .signup-forms .connect a.kaixin i {
        background-position: -168px 0
    }

    .signup-forms .connect a.kaixin:hover i {
        background-position: -168px -42px
    }

    .signup-forms .connect a.sohu i {
        background-position: -210px 0
    }

    .signup-forms .connect a.sohu:hover i {
        background-position: -210px -42px
    }

    .signup-forms .connect a.aq360 i {
        background-position: -336px 0
    }

    .signup-forms .connect a.aq360:hover i {
        background-position: -336px -42px
    }

    .signup-forms .connect a.weixin i {
        background-position: -294px 0
    }

    .signup-forms .connect a.weixin:hover i {
        background-position: -294px -42px
    }

    .signup-forms .connect a.more i {
        background-position: -252px 0
    }

    .signup-forms .connect a.more:hover i {
        background-position: -252px -42px
    }

    .bottom-link {
        width: 140px;
        margin: 10px auto;
        background-color: #000;
        border-radius: 15px;
        background-color: rgba(0, 0, 0, .4);
        text-align: center;
        font-size: 12px;
        color: #fff;
        padding: 4px 0;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, .4)
    }

    .bottom-link a {
        color: #ffa800;
        margin-left: 6px
    }

    .signup-forms .signup-box {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9;
        display: block
    }

    .signup-forms.flip .signup-box {
        display: none
    }

    .signup-forms .login-box {
        position: absolute;
        z-index: 8;
        top: 0;
        left: 0;
        display: none
    }

    .signup-forms.flip .login-box {
        z-index: 10;
        display: block
    }

    .signup-forms .bind-box {
        z-index: 0;
        display: none
    }

    .signup-forms.flip .bind-box {
        display: block
    }

    .signup-forms .mobile-field {
        clear: both;
        width: 320px;
        margin: 0 auto;
        padding-top: 10px;
        zoom: 1\9
    }

    .signup-forms .form-box {
        width: 316px;
        height: 40px;
        border: 1px solid #d8d8d8;
        border-radius: 4px;
        font-size: 14px;
        color: #666;
        padding: 0 0 0 4px;
        box-shadow: 0 0 5px #fff
    }

    .signup-forms .form-box .sel-box {
        float: left;
        width: 122px;
        height: 40px;
        line-height: 40px;
        border-right: 1px solid #e3e3e3;
        position: relative;
        padding: 0 0 0 8px
    }

    .signup-forms .form-box .sel-box i {
        border: 5px solid #ffa800;
        border-color: #ffa800 transparent transparent transparent;
        position: absolute;
        right: 10px;
        top: 18px
    }

    .signup-forms .form-box .sel-box .list {
        position: absolute;
        top: 37px;
        left: -5px;
        width: 320px;
        border: 1px solid #d8d8d8;
        background-color: #fff;
        display: none;
        height: 246px;
        overflow-y: auto
    }

    .signup-forms .form-box .sel-box dl {
        clear: both;
        border-bottom: 1px solid #f4f4f4;
        line-height: 40px;
        font-size: 14px;
        cursor: pointer
    }

    .signup-forms .form-box .sel-box dl:last-child {
        border: 0
    }

    .signup-forms .form-box .sel-box dl:hover {
        background-color: #f4f4f4
    }

    .signup-forms .form-box .sel-box dt {
        color: #666;
        padding-left: 15px;
        width: 235px;
        float: left
    }

    .signup-forms .form-box .sel-box dd {
        color: #999;
        padding-right: 15px;
        text-align: right
    }

    .signup-forms .form-box input {
        width: 172px;
        border-radius: 0;
        border: 0;
        height: 28px;
        padding: 6px 0 6px 8px;
        color: #666;
        font-size: 14px;
        line-height: 28px
    }

    .signup-forms .inner .alert,
    .add-info .alert {
        width: 300px;
        margin: 0 auto
    }

    .signup-forms .inner_v2 {
        width: 600px
    }

    .signup-forms .form-field_v2,
    .signup-forms .form-link_v2 {
        padding-left: 25px;
        margin: 0
    }

    .signup-forms .submit-btn_v2 {
        margin: 0;
        padding-left: 25px
    }

    .signup-forms .agreement_v2 {
        width: 345px;
        margin: 0
    }

    .signup-forms .connect .hd_v2 {
        width: 346px;
        border-top: 0 none
    }

    .signup-forms .inner_v2 .inner_v2_left {
        float: left;
        width: 370px
    }

    .signup-forms .inner_v2 .inner_v2_right {
        float: right;
        border-left: 1px solid #ebebeb;
        width: 208px;
        padding-left: 20px;
        height: 300px;
        padding-top: 20px
    }

    .signup-forms .inner_v2 .inner_v2_right img {
        width: 180px;
        height: 180px
    }

    .signup-forms .inner_v2 .inner_v2_right p {
        font-size: 15px;
        color: #797979;
        line-height: 24px;
        margin-top: 20px;
        text-align: center;
        width: 180px
    }

    .signup-forms .signup-box {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9;
        display: block
    }

    .signup-forms.flip .signup-box {
        display: none
    }

    .add-info {
        text-align: center;
        width: 370px;
        background-color: #fff;
        border-radius: 5px;
        padding-bottom: 20px
    }

    .add-info .hd {
        height: 56px;
        background-color: #f5f5f5;
        border-bottom: 1px solid #d8d8d8;
        line-height: 56px;
        font-size: 18px;
        color: #666;
        padding: 0 26px;
        border-radius: 5px 5px 0 0;
        text-align: left
    }

    .add-info .hd a {
        color: #ff8a00;
        text-decoration: none;
        font-size: 12px
    }

    .add-info .hd a:hover {
        text-decoration: underline
    }

    .add-info .m-t-10 {
        margin-top: 10px
    }

    .signup-forms .inner .alert,
    .add-info .alert {
        width: 300px;
        margin: 0 auto
    }

    .add-info .alert {
        margin-top: 20px
    }

    /*------------------------------------------------*/
    .signup-forms .form-field input:focus {
        border: 1px solid #ffa200;
        box-shadow: 0 0 5px #ffa200;
        outline: 0;
        transition: box-shadow .25s linear 0s;
        -webkit-transition: box-shadow .25s linear 0s
    }

    .signup-forms .form-field .disable-input {
        width: 308px;
        height: 28px;
        line-height: 28px;
        border: 1px solid #d8d8d8;
        border-radius: 4px;
        font-size: 14px;
        color: #666;
        padding: 6px 0 6px 12px;
        box-shadow: 0 0 5px #fff
    }

    .signup-forms .form-field .email {
        color: #999;
        text-align: left;
        line-height: 2em
    }
    .add-info .m-t-10 {
        margin-top: 10px
    }
    /*../../assets/login-images/err_ico2.png*/
    /*ico小图标*/
    .signup-forms .err-tip {
        clear: both;
        background: url(../../assets/login-images/err_ico2.png) 0 -60px no-repeat #fff;
        padding: 0 0 3px 22px;
        width: 300px;
        font-size: 12px;
        color: #ff3c00;
        margin-top: 10px;
        top: 0;
        position: absolute;
        text-align: left;
        /*display: none*/
    }

    .signup-forms .err-tip a {
        color: #ff8a00;
        text-decoration: none
    }

    .signup-forms .err-tip a:hover {
        text-decoration: underline
    }

    /*获取验证码*/
    .clearfix input.close_tel{
        width: 120px;
        height: 40px;
        /*line-height: 40px;*/
        display: inline-block;
        /*margin-right: 10px;*/
        margin-left: 0;
        text-align: center;
        border: 1px solid #dfdfdf;
        border-radius: 4px;
        background: #f2f2f2;
        background: -moz-linear-gradient(top, #fff, #f2f2f2);
        background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#f2f2f2));
        color: #333;
        vertical-align: top;
        float: left;
        overflow: hidden;
        outline: none;
        outline:0;
    }
</style>